$def with (profile, form, model)

<script>

$$(function() {
    $$( "#tabs" ).tabs({
        beforeLoad: function( event, ui ) {
            ui.jqXHR.error(function() {
                ui.panel.html("Ai.. Something when wrong in the compilation. Check the log!")
            });
        }
    });

    $$('.sortable').sortable({
        helper: 'clone',
        tolerance: 'pointer',
        cursor: 'pointer',
        dropOnEmpty: true,
        connectWith: 'ol.sortable',
        update: function(event, ui) {
            if(this.id == 'trash') {
                $$.post( "/ajax", { 'func': 'del_block', id: ui.item.attr('block-id') } )
                    .done(function( data ) {
                        $$('#'+ui.item.attr('id')).remove();
                    });
            } else if(this.id != "new"){
                update_placeholders();

                // Dropped on a section
                if(  ui.item.attr('block-id') == undefined){
                    console.log("It does not have a block ID");
                    // Replace the new 
                    var idx = $$(ui.item[0]).attr("index")
                    var elm = $$(ui.item[0]).clone(true);
                    if (idx > 0){
                        $$('#new').children(':eq('+(idx-1)+')').after(elm);
                    }
                    else{
                        $$('#new li:first-child').before(elm);
                    }
                    ui.item.attr('id', "new-block")
                    // Get ID from db
                    $$.post( "/ajax", { 
                        'func': 'new_block', 
                        'type': ui.item.text(), 
                        }).done(function( data ) {
                            $$('#new-block').attr('block-id', data.id)
                            settings = $$.parseJSON($$('#new-block').attr('settings'))
                            $$.each(settings, function( index ) {
                                $$('#new-block').append("<label>"+index+"</label>")
                                $$('#new-block').append("<input class='paramter' name='"+index+"' value='"+settings[index]+"' size='2'>")
                            });
                            
                            $$('#new-block').attr('id', "block-"+data.id)
                            
                            update_blocks($$('#block-'+data.id).parent())
                        });
                }
                else{
                    update_blocks($$('#'+this.id))
                }
            }
        }
    });
   
   update_placeholders();

    // Update settings on field edit
    $$("input.parameter").change(function(){
        block = $$(this).parent()
        settings = $$.parseJSON(block.attr('settings'))
        name = $$(this).attr("name")
        value = $$(this).val()
        settings[name] = value
        block.attr('settings', JSON.stringify(settings))
        update_block(block)
    })

    $$( "#view, #delete" ).button()
});

function update_block(block){
    $$.post( "/ajax", { 
            'func': 'update_block', 
            'id': block.attr('block-id'), 
            'settings': block.attr('settings'), 
            'section_id': block.parent().attr("section-id"), 
            'index': block.index()
            }).done(function( data ) {
                    console.log("Block updated!");   
            });
}

function update_blocks(section){
   section.children().each(function(){       
        update_block($$(this))
   });
}

function update_placeholders(){
    $$('.section').each(function(){
        if($$(this).children().length == 0){
            $$(this).append("<li class='placeholder'>Drag blocks here</li>");
        }
        else if ($$(this).children().length > 1){
            // Remove the placeholder
            $$(this).find(".placeholder").remove()
        }
    });
}


</script>
<style>
    #new{height: 100px; width: 600px; float: left; }
    #new ul li{ border: 1px solid #000; float: left;  height: 100px; }
    #trash{ height: 100px; width: 70px; background: url(http://wcdn1.dataknet.com/static/resources/icons/set20/f02a629829e9.png); background-size: 100px auto; float: left;}
    .sortable>li{ cursor: pointer; min-height: 30px; border: 1px solid #000;}    
</style>


<h1>Profile: $form.d.title</h1>

<p>
    <a id="view" href="/view/$profile.id">Done</a>
    <form action="/delete/$profile.id" method="post">
        <input id="delete" type="submit" value="Delete"/>
    </form>
</p>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Visual</a></li>
        <li><a href="/ajax/get_gcodes/$profile.id">Raw G-codes</a></li>
    </ul>
    <div id="tabs-1">
        <h3>New blocks</h3>
        <div style="height: 216px; border: 1px solid #ccc">
            <ul class="sortable" id="new">
                <li class="new" index="0" settings='{"radius": 5, "time": 2.3}'     ><span class="block-Circle">Circle</span></li>
                <li class="new" index="1" settings='{"Times": 3, "Seconds": 1.5}'   ><span class="block-Shake">Shake</span></li>
                <li class="new" index="2" settings='{"X": 0, "Y": 0, "Z": 0}'       ><span class="block-Move">Move</span></li>
                <li class="new" index="3" settings='{"Seconds": 1}'                 ><span class="block-Wait">Wait</span></li>
                <li class="new" index="4" settings='{"Degrees": 0, "wait": 0}'      ><span class="block-Temp">Temp</span></li>
                <li class="new" index="5" settings='{}'                             ><span class="block-Reset">Reset</span></li>
                <li class="new" index="6" settings='{"amount": 0}'                  ><span class="block-Water">Water</span></li>
                <li class="new" index="7" settings='{"coarseness": 0}'              ><span class="block-Coarseness">Coarseness</span></li>
                <li class="new" index="8" settings='{"on": 0}'                      ><span class="block-Grinder">Grinder</span></li>
                <li class="new" index="9" settings='{}'                             ><span class="block-Stop">Stop</span></li>
            </ul>
            <ol class="sortable" id="trash">
            </ol>
        </div>
        <div id="sections">
            $for section in model.get_sections_by_profile_id(profile.id):
                <h3>$section.title</h3>        
                <ol class="sortable section" id="section-$section.id" section-id="$section.id">
                    $for block in model.get_blocks_by_section_id(section.id):   
                        <li class="block" id="block-$block.id" block-id="$block.id" index="$block.idx" settings="$block.settings">
                            <span class="block-$block.name">$block.name</span>
                            $for key,value in model.get_settings_by_block(block).iteritems():
                                <label>$key</label>
                                <input class="parameter" name="$key" value="$value" size="2">
                        </li>
                </ol>
        </div>
    </div>
</div>


